import React from 'react';
import GlobalStyle from './styles/GlobalStyle';
import {
  DashboardContainer,
  LeftTopChart,
  LeftBottomChart,
  CenterChart,
  RightTopChart,
  RightBottomChart
} from './styles/Layout';
import LineChart from './components/LineChart';
import LineChart2 from './components/LineChart2';
import BarChart from './components/BarChart';
import BarChart2 from './components/BarChart2';
import HongKongMap from './components/HongKongMap';

const App: React.FC = () => {
  return (
    <>
      <GlobalStyle />
      <DashboardContainer>
        <LeftTopChart>
          <LineChart />
        </LeftTopChart>
        <LeftBottomChart>
          <LineChart2 />
        </LeftBottomChart>
        <CenterChart>
          <HongKongMap />
        </CenterChart>
        <RightTopChart>
          <BarChart />
        </RightTopChart>
        <RightBottomChart>
          <BarChart2 />
        </RightBottomChart>
      </DashboardContainer>
    </>
  );
};

export default App;
